<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 示例</title>
</head>
<body>
    <div id="app">
        点击次数：{{ counter }}
        <button @click="counter++">+ 1</button>
        <button @click="handleAdd(10)">+ 10</button>
        <!-- Vue 提供了 一个特殊变量 $event，用于访问原生 DOM 事件，例如下面的实例可以阻止链接打开 -->
        <a href="http://www.apple.com" @click="handleClick('禁止打开', $event)">open link</a>

        <!-- 修饰符-->
        <!--阻止单击事件冒泡 -->
        <a @click.stop=”handle"></a>
        <!-- 提交事件不再重载页面 -->
        <form @submit.prevent="handle"></form>
        <!-- 修饰符可以串联 -->
        <a @click.stop.prevent=”handle”></a>
        <!-- 〈!一只有修饰符一〉 -->
        <form @submit.prevent></form>
        <!-- 〈 !一添加事件侦听器时使用事件捕获模式一〉 -->
        <div @click.capture=”handle”>...</div>
        <!-- 〈!一只当事件在该元素本身(而不是子元素) 触发时触发回调一〉 -->
        <div @click.self=”handle”>...</div>
        <!--  <!一只触发一次，组件同样适用一〉 -->
        <div @click.once=”handle”>...</div>
    </div>

    <script src="http://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        // 变量app表示一个vue实例
        var app = new Vue({
            el: '#app', //用于指定一个页面中存在的Dom元素来挂载Vue示例。挂载成功后可以使用app.$el来访问该元素
            data: {
                counter: 0
            },
            methods: {
                handleAdd: function(count){
                    count = count || 1;
                    //this 指向当前vue实例app
                    this.counter += count;
                },
                handleClick: function(message, event){
                    event.preventDefault();
                    window.alert(message);
                }
            },
        })
    </script>
</body>
</html>